/**
 * Created by Haier on 2017/8/28.
 */

window.onload = function () {
    var outBox = document.getElementById('outBox');
    var inBox = document.getElementById('inBox');
    var imgWidth = inBox.offsetWidth;
    console.log(imgWidth);
    var ul = inBox.children[0];
    var ol = inBox.children[1];
    var ulis = inBox.children[0].children;
    var arr = document.getElementById("arr");
    var arrRight = document.getElementById("right");
    var arrLeft = document.getElementById("left");
    var timer = null;



//解决 当页面最小化再打开的时候轮播图混乱问题
    window.onblur = function(){
        clearInterval(timer);
    }
    window.onfocus = function(){
        timer = setInterval(playNext, 1000);
    }

    // 1  根据ulis的长度 动态生成ol下的li
    for (var i = 0; i < ulis.length; i++) {
        var lis = document.createElement('li');
        //设置索引
        lis.innerHTML = i + 1;
        //追加到ol下面
        ol.appendChild(lis);
    }
    //先 生成 在获取
    var olis = ol.children;
    //console.log(olis);
    olis[0].className = 'active';

    // 克隆第一张图片放到最后
    var first = ulis[0].cloneNode(true);
    ul.appendChild(first);


    // 2.鼠标经过按钮
    //循环遍历 给每一个按钮绑定鼠标经过事件

    for (var i = 0; i < olis.length; i++) {
        //设置当前索引
        olis[i].index = i;
        olis[i].onmouseover = function () {
            //暴力清除其他的类名
            for (var j = 0; j < olis.length; j++) {
                olis[j].className = '';
            }
            //留下自己
            this.className = 'active';
            //console.log(this.index);
            var target = -this.index * imgWidth;
            animate(ul, target);

            //将应该显示的图片的索引号 和 鼠标经过的按钮的索引号 进行统一
            num = this.index;
            //将应该亮起的按钮的索引号 和 鼠标经过的按钮的索引号 进行统一
            point = this.index;
        };
    } ;


    // 3 点击左右按钮动画
    //最外的盒子 里面的小盒子 有bug
    outBox.onmouseover = function () {
        //鼠标移上时 清除定时器
        clearInterval(timer);
        arr.style.display = 'block';
    }
    outBox.onmouseout = function () {
        //鼠标离开时 开启定时器
        arr.style.display = 'none';
        //playNext 不能加括号
        timer = setInterval(playNext, 1000);
    }
    //点击下一张
    var point = 0;
    var num = 0;
    arrRight.onclick = function () {
         playNext()
    };
    //点击上一张
    arrLeft.onclick = function () {
        //先判断后--
        if (num === 0) {
            num = ulis.length - 1
            // 如果到最后一张了 要瞬间到第一张
            ul.style.left = -(ulis.length - 1) * imgWidth + 'px';
        }
        num--;
        var target = -num * imgWidth;
        animate(ul, target);
        if (point > 0) {
            point--;
        } else {
            point = olis.length - 1;
        };
        //暴力清除
        clear()
    };


    //4  添加自动滚动
    var timer;
    clearInterval(timer);
    timer = setInterval(playNext, 1000);
    function playNext() {
        //先判断后++
        if (num >= ulis.length - 1) {
            num = 0
            // 如果到最后一张了 要瞬间到第一张
            ul.style.left = 0;
        }
        num++
        var target = -num * imgWidth;
        animate(ul, target);

        // 小按钮也自动播放
        //如果当前按钮的索引号point小于最后一个按钮的索引号olis.length - 1 就++
        if (point < olis.length - 1) {
            point++;
        } else {
            point = 0;
        };
        //暴力清除
        clear();
    };
    //暴力清除
    function clear(){
        for (var i = 0; i < olis.length; i++) {
            olis[i].className = '';
        }
        olis[point].className = 'active';
    }

    //封装动画函数
    function animate(obj, target) { //1. obj 谁做动画    2. target 目标位置 到哪儿
        clearInterval(obj.time);
        obj.time = setInterval(function () {
            var leader = obj.offsetLeft,
                step = 10; // 步长自定义10
            // 盒子当前的位置  和  target目标相比较
            step = obj.offsetLeft < target ? step : -step; // 往右走是 正值  反之 负值
            if (Math.abs(target - obj.offsetLeft) > Math.abs(step)) { // 盒子当前的位置 小于 500说明没有到目标位置
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                obj.style.left = target + "px"; // 如果差值 小于 步长 ，那么我们直接到目标位置即可。
                clearInterval(obj.time);
            };
        }, 10);
    }
};

